<template>
  <div>
    <el-dialog
      title="yaml文件详情"
      :visible.sync="dialogVisible"
      width="60%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforeClose"
    >
      <div style="height: 50vh; overflow-y: scroll">
        <codemirror v-model="yamlValue" :options="cmOptions" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          class="el-button-primary-style"
          @click="upgradeYamlCloudNative"
        >
          升 级
        </el-button>
        <el-button
          type="primary"
          size="small"
          class="el-button-primary-style"
          @click="beforeClose(null)"
        >
          取 消
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/yaml/yaml.js";

export default {
  name: "ShowYamlInfo",
  components: {
    codemirror,
  },
  props: ["tmpCloudNative"],
  data() {
    return {
      dialogVisible: false,
      cmOptions: {
        mode: "yaml", // 使用YAML模式
        theme: "default", // 使用默认主题
        lineNumbers: true, // 显示行号
        line: true, // 显示行高亮
        styleActiveLine: true, // 高亮当前行
        matchBrackets: true, // 括号匹配高亮
        autoCloseBrackets: true, // 自动闭合括号
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // 显示行号和折叠标记
        foldGutter: true, // 启用折叠功能
      },
      yamlValue: "",
      cloudNativeInfo: {
        id: "",
        yamlDeployName: "",
        yamlDeployType: "",
        yamlName: "",
        yamlVersion: "",
        yamlDescription: "",
        yamlImages: "",
        yamlContent: "",
      },
      tmpCloudNativeInfo: {},
    };
  },
  methods: {
    viewYamlCloudNative() {
      this.$appManageApi.viewCloudYaml(this.tmpCloudNative.id).then((res) => {
        if (res && res.code === 200) {
          this.yamlValue = res.data;
        }
      });
    },
    upgradeYamlCloudNative() {
      this.cloudNativeInfo.yamlContent = this.yamlValue;
      this.$appManageApi.upgradeCloudYaml(this.cloudNativeInfo).then((res) => {
        if (res && res.code === 200) {
          this.$message.success(res.data);
          this.beforeClose(null);
        }
      });
    },
    beforeClose(done) {
      this.$emit("closeYamlCloudNativeDialog");
      this.cloudNativeInfo = {
        id: "",
        yamlDeployName: "",
        yamlDeployType: "",
        yamlName: "",
        yamlVersion: "",
        yamlDescription: "",
        yamlImages: "",
        yamlContent: "",
      };
      this.yamlValue = "";
      this.dialogVisible = false;
      if (done !== null) {
        done();
      }
    },
  },
  beforeMount() {
    this.viewYamlCloudNative();
    this.tmpCloudNativeInfo = {
      ...JSON.parse(JSON.stringify(this.tmpCloudNative)),
    };
    this.cloudNativeInfo.id = this.tmpCloudNativeInfo.id;
    this.cloudNativeInfo.yamlDeployName =
      this.tmpCloudNativeInfo.yamlDeployName;
    this.cloudNativeInfo.yamlDeployType =
      this.tmpCloudNativeInfo.yamlDeployType;
    this.cloudNativeInfo.yamlName = this.tmpCloudNativeInfo.yamlName;
    this.cloudNativeInfo.yamlVersion = this.tmpCloudNativeInfo.yamlVersion;
    this.cloudNativeInfo.yamlDescription =
      this.tmpCloudNativeInfo.yamlDescription;
    this.cloudNativeInfo.yamlImages = this.tmpCloudNativeInfo.yamlImages;
  },
};
</script>

<style scoped>
</style>
